import React from 'react'
// ===================================================================== 
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Title		= $Lazy.load(()=>import('#tp/title/title-small'))
const FormItem	= $Lazy.load(()=>import('#cpt/form/submit-item'))
// ===================================================================== data
let list = [
	{ label:'满意', 							name:'1-1', 	line:'line_1',		index:1, 	group:'1' },
	{ label:'未见滤泡上皮或仅见极少量滤泡上皮', 	name:'1-1-2',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-1' },
	{ label:'仅有囊液',							name:'1-1-3',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-1' },
	
	{ label:'其它（血液遮盖、凝固假象等）', 		name:'1-1-4',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-1'},
	
	// 良性病变
	{ label:'符合良性滤泡性结节(包括腺瘤样结节，胶质结节等)', 	name:'2-1',	line:'line_2', index:3, group:'4-1', t1:'1、良性病变' },
	{ label:'符合淋巴细胞性(Hashimoto’s)甲状腺炎', 				name:'2-2',	line:'line_2',	index:3, group:'4-1',flag:'4-1'},
	{ label:'符合肉芽肿性(亚急性)甲状腺炎', 						name:'2-3',	line:'line_2',	index:3, group:'4-1',flag:'4-1'},
	{ label:'其他', 											name:'2-4',	line:'line_2',	index:3, group:'4-1',flag:'4-1'},
	
	// 意义不明确
	{ label:'细胞非典型性病变(AUS) ', 		name:'3-1',	line:'line_3',	index:3, group:'4-2', t1:'2、意义不明确' },
	{ label:'滤泡性病变(FLUS) ', 			name:'3-2',	line:'line_3',	index:3, group:'4-2'},
	
	// 滤泡性肿瘤
	{ label:'啫酸细胞肿瘤或可疑啫酸细胞肿瘤 ', 	name:'4-1',	line:'line_4',	index:3, group:'4-3', t1:'3、滤泡性肿瘤' },
	{ label:'滤泡肿瘤或可疑滤泡肿瘤', 			name:'4-2',	line:'line_4',	index:3, group:'4-3'},
	
	// 可疑恶性肿瘤
	{ label:'可疑乳头状癌', 			name:'5-1', 	line:'line_5',	index:4, 	group:'4-4', t1:'4、可疑恶性肿瘤' },
	{ label:'可疑髓样癌', 			name:'5-2', 	line:'line_5',	index:4, 	group:'4-4' },
	{ label:'可疑淋巴瘤', 			name:'5-3', 	line:'line_5',	index:4, 	group:'4-4' },
	{ label:'可疑转移性癌', 			name:'5-4', 	line:'line_5',	index:4, 	group:'4-4' },
	{ label:'其他', 				name:'5-5', 	line:'line_5',	index:4, 	group:'4-4' },
	
	// 恶性肿瘤
	{ label:'甲状腺乳头状癌', 		name:'6-1', 	line:'line_6', index:4, 	group:'4-5', t1:'5、恶性肿瘤' },
	{ label:'低分化癌', 				name:'6-2',		line:'line_6', index:4, 	group:'4-5' },
	{ label:'甲状腺髓样癌',			name:'6-3',		line:'line_6', index:4, 	group:'4-5' },
	{ label:'未分化(问变性)癌',		name:'6-4',		line:'line_6', index:4, 	group:'4-5' },
	{ label:'其他',					name:'6-5',		line:'line_6', index:4, 	group:'4-5' },
]
// ===================================================================== component
const Index = ({ info={}, result = {}, disabled, form }, ref) => {
	const [ data, setData ] = React.useState($fn.copy(list))
	const rsRef = React.useRef({})

	// 初始始加载
	const init = React.useCallback(form => {
		let { forms_check_data, imgs, regroup_data_web  } = result || {}
		let my_forms = {}
		let copy_data = forms_check_data
		let copy_list = $fn.copy(list)
		
		if($fn.hasArray(copy_data)){
			copy_data.forEach(v=>{
				const key = Object.keys(v)[0]
				const value = v[key]
				if($fn.isValid(value)){
					my_forms[key] = true
				}else{
					my_forms[key] = false
				}
				
				// 回显是否禁用
				copy_list.forEach( m => {
					if( m.name === key && value){
						m.disabled = false
						copy_list.forEach( n => {
							if(n.flag === key || n.name === key){ // 如果 name,flag 相同的，不禁用
								n.disabled = false
							}
						})
					}
				})
			})
			setData(copy_list)
			form.setValue({...my_forms, imgs, ts_audit_name:info.ts_audit_name, ts_approve_name:info.ts_approve_name})
			// 加载默认
		}else{
			setData(copy_list)
			// form.setValue({ '1-1':true, '1-1-1':true, '2-1':true })
		}
		
		// 回显
		rsRef.current = {}
		if(regroup_data_web){
			try{
				let { cussumData } = JSON.parse(regroup_data_web)
				if($fn.hasArray(cussumData)){
					cussumData.forEach( v => rsRef.current[v.num_key]  = { data: v })
				}else{
					cussumData = []
				}
			}catch(e){
				console.error('cussumData 不是标准的 JSON 格式')
			}
		}
	},[result, info])
	
	React.useImperativeHandle( ref, () => {
		return {
			data : () => {
				let cussumData = []
				for( let i in rsRef.current){
					const _data = rsRef.current[i]['data']
					if($fn.hasObject(_data)){
						cussumData.push(_data)
					}
				}
				return { 
					list, 
					web: {
						cussumData, 				// 选择的 numKey 数据
					} 
				}
			},
			load: form => init(form)
		}
	})
	
	React.useEffect(()=>{
		
	},[ ])
	// 改变时判断
	const onChange = React.useCallback((rows, {value}) => {
		const { ref } = form.current.refs
		// 表单联动
		data.forEach((v,i)=>{
			const { group,  flag, name } = v
			if(value){
				 // 
				if(rows.group === group && group){
					if(rows.name === name){
						ref.setValue({[name]: value })
					}else{
						ref.setValue({[name]: !value})
						delete rsRef.current[name]
					}
				}
				
				// 
				if( rows.flag === flag && rows.type === 'radio'){
					if(rows.name === name){
						ref.setValue({[name]: value })
					}else{
						ref.setValue({[name]: !value})
						delete rsRef.current[name]
					}
				}
			}else{
				if(rows.group && rows.name === flag){ 
					ref.setValue({[name]: false})
					delete rsRef.current[name]
				}
			}
		})
		setData([...data])
	},[form, data]) 
	// 第一部分
	const ListA = React.useCallback( flag =>{
		return (
			<div className='fxm'>
				{
					data.map((v,i) => (
						(v.flag === flag || v.name === flag) && (
							<React.Fragment key={i}>
								{
									v.type === 'radio' ?	<FormItem label={v.label} name={v.name} disabled={disabled||v.disabled} type='checkbox' onChanged={m=>onChange(v,m)}/>
														:	<FormItem style={{width:80}} label={v.label} name={v.name} disabled={disabled} type='checkbox' onChanged={m=>onChange(v,m)}/>
								}
							</React.Fragment>
						)
					))
				}
			</div>
		)
	},[data, disabled, onChange])
	const style = {height:22, lineHeight:22}
	return (
		<div className='wh fv tct-box'>
			<section className='fx rel i10'>
				<div className='ex'>
					<Title title='样本满意度' style={style} />
					{ ListA('1-1') }
					{ ListA('1-2') }
							
					{/* TBS 标准诊断 */}
					<div className='tbor1 mt5'>
						<Title title='TBS 标准诊断' style={style} />
					</div>
					
					<div className='f12 tbor1 fx checkbox-list'>
						{/* 1、良性病变 */}
						<div className='ex mt10'>
							{
								data.map((v,i) => (
									v.index === 3 && (
										<React.Fragment key={i}>
											{ v.t1 && <div className='ml10 g6 b'>{v.t1}</div>}
											{ v.t2 && <div className='ml30 lh20 g6 b'>{v.t2}</div>}
											{ v.name && <FormItem style={{marginLeft:30}} key={i} label={v.label} name={v.name} type='checkbox' disabled={disabled||v.disabled} onChanged={m=>onChange(v,m)}/>}
										</React.Fragment>
									)
								))
							}
						</div>
						{/* 二、可疑恶性肿瘤 */}
						<div className='ex mt10'>
							{
								data.map((v,i) => (
									v.index === 4 && (
										<React.Fragment key={i}>
											{ v.t1 && <div className='ml10 g6 b' style={{marginBottom:2}}>{v.t1}</div>}
											<FormItem style={{marginLeft:v.type === 'radio' ? 50 : 30}} key={i} label={v.label} name={v.name} type='checkbox' disabled={disabled||v.disabled} onChanged={m=>onChange(v,m)}/>
										</React.Fragment>
									)
								))
							}
						</div>
					</div>
				</div>
				<div className='lbor1 pl10' style={{width:260}}>
					<FormItem title='图形' name='imgs' type='upload' disabled={disabled} multiple/>
				</div>
			</section>
			<div className='fx ex tbor1 rel ptb5 big-font'>
				<div className='ex fv h'>
					<div className='fx ex mr10'>
						
						<div className='ex fv'>
							<div className='fx'>
								<Title title='判读意见/结果' style={{width:100}} />
								<div className='ex fv'>
									<FormItem label='判读意见/结果' name='result_proposal' rows={5} wrapClassName='ex ml10 fv ex full-textarea' mode='textarea' disabled={disabled}/>
								</div>
							</div>
							<div className='fx mt10'>
								<Title title='标本性状' style={{width:100}} />
								<div className='ex fv'>
									<FormItem label='标本性状' name='specimen_traits' r={true} rows={5} wrapClassName='ex ml10 fv ex full-textarea' mode='textarea' disabled={disabled}/>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className='ex fv h'>
					<div className='fx ex mr10'>
						<Title title='镜下所见' style={style} />
						<FormItem label='镜下所见' name='suggest' rows={6} wrapClassName='ex ml10 fv ex full-textarea' mode='textarea' disabled={disabled}/>
					</div>
				</div>
			</div>
		</div>
	)
}

export default Index